
<script setup lang="ts">
import { advisorConfigData } from "@/api/gta/advisor"

/** 背影图片列表 表单 */
defineOptions({ name: 'BackgroundImageListForm' })

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单加载中：1）修改时的数据加载；2）提交的按钮禁用

/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  dialogTitle.value = '选择背景图片'
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 选择图片 */
const emit = defineEmits(['change']) // 定义 change 事件，用于选取图片后的回调
const onImageSelected = (url: String) => {
  emit('change', url)
  dialogVisible.value = false
  formLoading.value = false
}

</script>

<template>
  <Dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    v-loading="formLoading"
    class="background-image-list"
    :style="{ width: '400px'}"
  >
  <el-scrollbar max-height="70vh" always>
    <el-image
      v-for="{id, url} in advisorConfigData.StoreConfigData.backImgs" :key="id" :src="url"
      @click="onImageSelected(url)" style="cursor: pointer;"/>
    <template #footer>
      <el-button @click="dialogVisible = false">close</el-button>
    </template>
    </el-scrollbar>
  </Dialog>
</template>

<style  lang="scss">

.background-image-list {
  .el-dialog__body{
    padding:0 !important;
  }
 
}
</style>
